<template>
  <div>
    <mine-collapse
      :items="traceItems"
      @changeHeight="changeHeight"
      @allOption="allOption"
    >
      <template #advice="data">
        <advice-collapse :adviceItem="data.data.content"></advice-collapse>
      </template>
      <template #comment="data">
        <comment-collapse :content="data.data.content"></comment-collapse>
      </template>
      <template #commentback="data">
        <comment-collapse :content="data.data.content"></comment-collapse>
      </template>
      <template #prod="data">
        <prod-collapse :content="data.data.content"></prod-collapse>
      </template>
    </mine-collapse>
  </div>
</template>

<script setup lang="ts">
import mineCollapse from "@/components/Collapse.vue";
import adviceCollapse from "./advice.vue";
import commentCollapse from "./comment/comment.vue";
import prodCollapse from "./prod/prod.vue";
import { ref, computed, onMounted } from "vue";
import { useStore } from "vuex";
import $axios from "axios";
import { Collapse } from "@/type/Collapse";
const $store = useStore();
const traceItems = ref<Array<Collapse>>([]);
onMounted(() => {
  searchUserAllTrance();
});
const addProdgrant = computed(() => {
  return (
    $store.getters.user.status === "876ea4f21078c7d38e3b0bdc74a" ||
    $store.getters.user.status === "d630fbb5fd6026ccb4af0eb68d3"
  );
});
const searchUserAllTrance = () => {
  $axios
    .post("/trace/trace", {
      username: $store.getters.user.username,
    })
    .then((res) => {
      let traceItemss = res.data.data.map((item: Collapse, index: number) => {
        let title = "",
          id = "",
          ifShow = true;
        switch (index) {
          case 0:
            (title = "作品"), (id = "prod");
            break;
          case 1:
            (title = "留言"), (id = "advice");
            break;
          case 2:
            (title = "评论"), (id = "comment");
            break;
          case 3:
            (title = "回复"), (id = "commentback");
        }
        return { title, content: item, status: false, ifShow, id };
      });
      if (addProdgrant.value) {
        traceItems.value = traceItemss;
      } else {
        traceItems.value = traceItemss.map((item: Collapse) => item.id !== "prod");
      }
    });
};
const changeHeight = (index: number) => {
  traceItems.value.forEach((item, i) => {
    if (i === index) {
      traceItems.value[i] = { ...item, status: !item.status };
    }
  });
};
const allOption = (allStatus: boolean) => {
  traceItems.value.forEach((item: Collapse, i: number) => {
    traceItems.value[i] = { ...item, status: !allStatus };
  });
};
</script>

<style></style>
